<template>
    <div class="flex box_cont">
        <div class="box_cont topic_cont flex_column_between" :style="{width:isAnswer ? '65%' : '100%'}" ref="boxfull" v-loading="loading">
            <audio :src="voiceUrl" controls ref="audio" class="po" @ended="playEnd" style="display:none"></audio>
            <div class="tit_cont">
                <div style="position: relative">
                    <img class="back_img-back cur" @click="$router.go(-2)" src="@/assets/img/back_1.png" style="position: absolute;left: -12rem;top: .5rem;width: 4rem;height: 4rem" />
                    <div class="font36 bold">
                        {{ article?.title || '' }}
                        <template v-if="content?.type === 'zh'">
                            （{{ article?.titleZh }}）
                        </template>
                    </div>
                </div>

                <div class="w-full level_cont flex_center_between">
                    <div class="flex_center level_row font20 "></div>
                    <div style="display: flex;">
                        <div class="print_cont flex_c_c font20 themeFont cur" @click="toParticulars">
                            <img class="icon" src="@/assets/img/viewicon.png" /> 查看
                        </div>
                        <div class="print_cont flex_c_c font20 themeFont cur" @click="printFun" style="margin-left: 1rem;">
                            <img class="icon" src="@/assets/img/print_3.png" /> 打印
                        </div>
                    </div>
                </div>
            </div>

            <!-- 文章内容 -->
            <div v-if="article" class="text_cont-view" ref="textContView">
                <div class="text_cont flex-center" style="text-indent: 2em;" ref="refWord" v-html="article.content" @mouseup.stop="onmouseup($event)"></div>
                <div v-if="content.type === 'zh'" class="text_cont flex-center" ref="refWord" v-html="article.translate" style="font-size: 3rem;"></div>
            </div>
            <empty v-else type="1" text="暂无内容" />

            <div class="btn_cont flex_center_between">
                <p class="left_num flex_center">
                    <template v-if="voiceBtnShow">
                        <el-button id="fullscreen_button" style="width: 12rem;font-size:2rem;padding: 1.1rem 3rem;margin-right: 10px;" type="warning" @click="articlePlayAudio()">
                            <div class="flex_c_c">
                                <img style="margin-right: 12px;width: 3rem" src="@/assets/img/play_1.png" />
                                {{ playStatus ? '取消' : '点读' }}
                            </div> 
                        </el-button>
                        <audio style="width: 56rem;" :src="article.voiceFile.url || ''" controls ref="audioArticle" @ended="articlePlayEnd" v-if="playStatus" controlsList="nodownload" autoplay></audio>
                    </template> 
                    <template v-else>
                        <el-tooltip effect="dark" content="音频正在生成中~" placement="bottom">
                            <el-button id="fullscreen_button" style="width: 12rem;font-size:2rem;padding: 1.1rem 3rem;margin-right: 10px;" type="warning">
                                <div class="flex_c_c">
                                    <img style="margin-right: 12px;width: 3rem" src="@/assets/img/play_1.png" />
                                    点读
                                </div> 
                            </el-button>
                        </el-tooltip>
                    </template>
                </p>
                <div class="flex-1 flex justify-end">
                    <template v-if="article?.translate">
                        <el-button v-if="content.type === 'en'" type="warning" @click="onContentType('zh')" class="kdgkddkjdkhjdk">  
                            <div class="flex_c_c cur"><img style="margin-right: 12px;width: 3rem" src="@/assets/img/sj.png"/>中文</div> 
                        </el-button>
                        <el-button v-if="content.type === 'zh'" type="primary" @click="onContentType('en')" class="kdgkddkjdkhjdk">  
                            <div class="flex_c_c cur"><img style="margin-right: 12px;width: 3rem" src="@/assets/img/sj.png"/>英文</div> 
                        </el-button>
                    </template>

                    <el-button id="fullscreen_button" style="width: 12rem;font-size:2rem;padding: 1.1rem 3rem;" type="warning" @click="wordShow" v-if="!wordShowStatus">
                        <div class="flex_c_c"><img style="margin-right: 12px;width: 3rem" src="@/assets/img/sc.png" /> 生词</div> 
                    </el-button>
                    <el-button style="width: 12rem;font-size:2rem;padding: 1.1rem 3rem;" type="primary" @click="wordHide" v-if="wordShowStatus">  
                        <div class="flex_c_c cur"><img style="margin-right: 12px;width: 3rem" src="@/assets/img/zt.png"/> 隐藏</div> 
                    </el-button>
                    <el-button id="fullscreen_button" style="width: 12rem;font-size:2rem;padding: 1.1rem 3rem;" type="warning" @click="rememberWord">
                        <div class="flex_c_c cur"><img style="margin-right: 12px;width: 3rem" src="@/assets/img/sj.png" /> 识记</div> 
                    </el-button>

                    <template v-if="questionBtnShow">
                        <el-button style="width: 12rem;font-size:2rem;padding: 1.1rem 3rem;" v-if="!isAnswer" type="primary" @click="showQuestionFun">  
                            <div class="flex_c_c cur"><img style="margin-right: 12px;width: 3rem" src="@/assets/img/zt.png"/> 做题</div> 
                        </el-button>
                    </template>
                    <template v-else>
                        <el-tooltip effect="dark" content="AI题目生成中~" placement="bottom">
                            <el-button disabled style="width: 12rem;font-size:2rem;padding: 1.1rem 3rem;" v-if="!isAnswer" type="primary" @click="showQuestionFun">  
                                <div class="flex_c_c cur"><img style="margin-right: 12px;width: 3rem" src="@/assets/img/zt.png"/> 做题</div> 
                            </el-button>
                        </el-tooltip>
                    </template>
                </div>
            </div>
        </div>

        <!-- 答题 -->
        <div ref="refAnswerBox" class="answer_cont flex flex-column" v-if="isAnswer">
            <div class="w_full answer_tit flex_center">
                <div class="title flex_c_c">
                    <img class="icon" src="@/assets/img/time_1.png" />
                    <span class="text">{{ clockTime }}</span>
                </div>
            </div>
            <template v-if="questionShow">
                <div class="head_cont cur" @mouseup.stop="onmouseup_word($event)">
                    <span class="tag font24"><span class="font32">{{ questionIndex + 1 }}</span>/{{ questions.length }}</span>      
                    {{ question && question.stem || ''}}
                </div>
                <!-- 选项 -->
                <div class="flex_center option_row font32 cur" v-for="(item, index) in question.option" :class="{status: answerlist && answerlist.length && checkOptionChoose(item)}" :key="index" @click="isChoose ? chooseOptionFun(item) : ''">
                    <div>
                        <div class="option flex_c_c font-26" :class="{status1: answerlist && answerlist.length && checkOptionChoose(item)}">{{ item.prefix }}</div>
                    </div>
                    <p class="word_text" @mousedown="mouseDownFn" @mouseup.stop="onmouseup_word($event)"  @dblclick="onmouseup_word()">{{ item.content }}</p>
                </div>
                <div class="flex-1 flex justify-end" style="margin-top: 1.8rem;">
                    <el-button style="width: 14rem;font-size:2rem;padding: 1.1rem 3rem;height: 5.4rem;" type="primary" v-if="questionShow && questionIndex > 0" @click="prevQuestion">  
                            上一题
                    </el-button>
                    <el-button style="width: 14rem;font-size:2rem;padding: 1.1rem 3rem;height: 5.4rem;" type="primary" v-if="questionShow && questionIndex < questions.length" @click="nextQuestion">  
                            下一题
                    </el-button>
                </div>
            </template>
            
            <div class="answer_over" v-if="answerOver">
                <div class="font20">题目已做完，确认提交吗？</div>
                <div class="cont flex_center">
                    <div class="item flex_c_c font24 green cur" v-for="(item, index) in questions" :key="index" @click="jumpQuestion(index)">
                        {{ index + 1 }}
                    </div>
                </div>
                <el-button style="width: 14rem;font-size:2rem;padding: 1.1rem 3rem;height: 5.4rem;" type="primary" @click="submitFn()" :loading="submitLoading">  
                    提交
                </el-button>
            </div>
        </div>

        <!-- 文章单词弹窗 -->
        <div class="modal_cont" v-if="wordPop" @click="closeWordPop(1)">
            <div class="info_cont" :style="{top:infoTop+'px',left:infoLeft+'px'}">
                <div class="word bold font32">{{ infoword }}</div> 
                <div style="display: flex;justify-content: center;">
                    <div class="word_btn font22 cur" @click.stop="addWordFun(infoword, 1)" v-loading="addWordLoading">+ 加入生词</div>
                    <!-- <div class="word_btn font22 cur" @click.stop="queryWordFun(infoword)" style="margin-left: 20px;"><i style="margin-left: -0.6rem" class="el-icon-collection-tag"></i>词汇释义</div> -->
                </div>
            </div>
        </div>

        <!-- 题目选项单词弹窗 -->
        <div class="modal_cont" v-if="questionWordPop" @click="closeWordPop(2)">
            <div class="window_cont" ref="myElement" :style="{top:wtop+'px',left:wleft+'px'}" v-loading="wordTranslateLoading">
                <div class="word bold font32 flex_center cur">
                    {{ word }}  
                    <img class="play_icon" src="@/assets/img/play_2.png" @click.stop="playAudio(2)"/>
                </div>
                <div class="font24 word_meaning" v-html="wordTranslate.translation"></div> 
                <div class="wordbtn_cont flex_center_between">
                    <div class="word_btn font22 cur" @click.stop="addWordFun(word, 2)">+  加入生词</div>
                    <div class="word_btn font22 bl cur" @click.stop="jumpYoudao(word)">详细解释</div>
                </div>
            </div>
        </div>

        <!-- 词库弹框 -->
        <!-- <dict-dialog ref="dictDialog" /> -->
    </div>
</template>

<script>
// import dictDialog from "@/views/components/dict-dialog.vue"
import { exerciseInfo, startExercise, saveAnswer, submitExercise, finishCourse } from '@/api/articleExercise.js'
import { article } from '@/api/courseArticle.js'
import { wordList, addWord, wordTranslate } from '@/api/articleWord.js'
import config from '@/config/index.js'
export default {
    components: {
        // dictDialog
    },
    props: {
        bearRef: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            loading: false,
            addWordLoading: false,
            wordTranslateLoading: false,
            submitLoading: false,
            wordShowStatus: false,
            questionWordPop: false,
            questionShow: false, // 是否显示题目
            answerOver: false,
            voiceShow: false,
            articleId: 0,
            exerciseId: 0,
            userId: 0,
            article: null,
            exercise: {},
            playStatus: false,
            voiceUrl: '',
            wordsList: [],
            infoTop: 0,
            infoLeft: 0,
            wtop: 0,
            wleft: 0,
            wordPop: false,
            infoword: '',
            word: '',
            firstTime: '',
            lastTime: '',
            isClick: true,
            isAnswer: false,
            wordTranslate: {},
            questionIndex: 0,
            question: {}, // 当前题目
            questions: [], // 所有题目
            isChoose: true,
            answerData: {
                answers: [],
            },
            answerlist: [],
            clockTime: '00:00',
            content: {
                type: 'en',
                text: ''
            },
            questionBtnShow: false,
            questionTimer: null,
            voiceTimer: null,
            voiceBtnShow: false
        }
    },
    created() {},
    destroyed(){
        clearInterval(this.questionTimer)
        clearInterval(this.voiceTimer)
    },
    mounted(){
        this.exerciseId = this.$route.query.exerciseId || 0
        this.userId = this.$route.query.userId || 0
        this.articleId = this.$route.query.articleId || 0
        if (this.exerciseId > 0) {
            this.getExercise()
        }
        if (this.articleId) {
            this.getArticle()
            this.getWordList()
        }
    },
    methods:{
        /** 显示译文并且平滑滚动到底部 */
        onContentType(type) {
            this.content.type = type;
            setTimeout(() => {
                this.$nextTick(() => {
                    this.$refs.textContView?.scrollTo({ 
                        behavior: 'smooth',
                        top: this.$refs.textContView?.children[0].clientHeight
                    });
                });
            }, 300);
        },

        getExercise() {
            exerciseInfo({id: this.exerciseId, userId: this.userId}).then(res => {
                if (res.error == 0) {
                    this.exercise = res.data
                }
            })
        },
        //获取文章详情
        getArticle() {
            this.loading = true
            article({id: this.articleId, userId: this.userId}).then(res => {
                this.loading = false
                if (res.error == 0) {
                    this.article = res.data

                    // 判断题目是否已生成
                    if (this.article.questions?.length > 0) {
                        this.questionBtnShow = true
                        this.questions = res.data.questions
                    }

                    if (this.article.taskStatus && this.article.taskStatus.value == 1) {
                        this.checkQuestionCreate()
                    }

                    if (!this.article.voiceFile.path) {
                        this.checkVoiceCreate()
                    }else {
                        this.voiceBtnShow = true
                    }
                }
            }).finally(() => {
                this.loading = false
            })
        },
        checkQuestionCreate() {
            // 定时器，每隔一秒判断一次，如果生成了题目，则显示做题按钮
             this.questionTimer = setInterval(() => {
                article({id: this.articleId, userId: this.userId}).then(res => {
                    if (res.error == 0) {
                        this.article = res.data
                        if (res.data.questions?.length > 0) {
                            this.questions = res.data.questions
                            this.questionBtnShow = true
                        }
                        if (this.article.taskStatus && this.article.taskStatus.value == 100) {
                            clearInterval(this.questionTimer)
                        }
                    }
                })
            }, 3000)
        },
        checkVoiceCreate() {
            // 定时器，每隔一秒判断一次，如果生成了音频，则显示
             this.voiceTimer = setInterval(() => {
                article({id: this.articleId, userId: this.userId}).then(res => {
                    if (res.error == 0) {
                        this.article = res.data
                        if (res.data.voiceFile.path) {
                            this.voiceBtnShow = true
                            clearInterval(this.voiceTimer)
                        }
                    }
                })
            }, 3000)
        },
        // 加入生词
        addWordFun(word, type) {
            if (!word) {
                this.$message.error({ el: this.bearRef.$el, message: '请选择要加入的单词' })
                return
            }

            word = word.trim()

            // 判断word是否是英文单词
            let reg = /^[a-zA-Z]+$/;
            if (!reg.test(word)) {
                this.$message.error({ el: this.bearRef.$el, message: '请选择英文单词' })
                return
            }
            if (type == 1) {
                this.addWordLoading = true
            }else if (type == 2) {
                this.wordTranslateLoading = true
            }
            addWord({articleId: this.articleId, word: word, userId: this.userId}).then(res => {
                if (res.error == 0) {
                    this.$message.success('加入成功')
                    if (type == 1) {
                        this.wordPop = false
                    }else {
                        this.questionWordPop = false
                    }
                    window.getSelection().removeAllRanges();
                    this.getWordList()
                }
            }).finally(() => {
                if (type == 1) {
                    this.addWordLoading = false
                }else if (type == 2) {
                    this.wordTranslateLoading = false
                }
            })
        },
        queryWordFun(word){
            this.$refs.dictDialog.showEdit(word)
            this.wordPop = false
        },
        getWordList() {
            wordList({articleId: this.articleId, userId: this.userId}).then(res => {
                if (res.error == 0) {
                    let words = []
                    res.data.forEach(item => {
                        words.push(item.word)
                    })
                    this.wordsList = words
                }
            })
        },
        // 获取单词翻译
        getWordTranslate(word) {
            if (!word) {
                this.$message.error({ el: this.bearRef.$el, message: '请选择单词' })
                return
            }
            // 判断word是否是英文单词
            let reg = /^[a-zA-Z]+$/;
            if (!reg.test(word)) {
                this.$message.error({ el: this.bearRef.$el, message: '请选择英文单词' })
                return
            }
            if (this.wordTranslateLoading) return
            this.wordTranslateLoading = true
            wordTranslate({word: word }).then(res => {
                this.wordTranslateLoading = false
                if (res.error == 0) {
                    this.wordTranslate = res.data
                    this.$nextTick(()=>{
                        try {
                            let {bottom} = window.getSelection().getRangeAt(0).getBoundingClientRect()
                            let winHeight =window.innerHeight
                            if(this.$refs.myElement){
                                let h = this.$refs.myElement.offsetHeight
                                if((bottom+h+70)>winHeight){
                                    this.wtop = winHeight - h
                                }
                            }
                        } catch (error) {
                            console.log(error)
                        }
                    })
                }
            }).finally(() => {
                this.wordTranslateLoading = false
            })
        },
        //点击播放
        playAudio() {
            this.voiceUrl = this.wordTranslate.voiceUrl
            this.$nextTick(() => {
                this.$refs.audio.play()
            })
        },
        playEnd() {
            this.voiceUrl = ''
        },
        // 文章播放
        articlePlayAudio() {
            if (this.playStatus) {
                this.$refs.audioArticle.pause()
                this.playStatus = false
                return
            }
            if (this.article.status && this.article.status.value == 2) {
                this.$message.warning({ el: this.bearRef.$el, message: '文章音频正在转换中，请稍等下再播放' })
                return 
            }
            this.playStatus = true
            this.$nextTick(() => {
                this.$refs.audioArticle.play()
            })
        },
        // 文章播放结束
        articlePlayEnd() {
            this.playStatus = this.playStatus ? false : this.playStatus
        },
        //隐藏生词
        wordHide(){
            this.wordShowStatus = false
            this.article.content = this.article.content.replace(/<span class="tagword">/g, '')
            this.article.content = this.article.content.replace(/<\/span>/g, '')
        },
        //显示生词
        wordShow(){
            if (this.wordsList.length == 0) {
                this.$message.error({ el: this.bearRef.$el, message: '暂无已加入的生词' })
                return
            }
            this.wordShowStatus = true
            this.wordsList.forEach(item => {
                let str = this.article.content.replace(new RegExp(item,"g") , '<span class="tagword">'+item+'</span>') 
                this.article.content = str
            })
        },
        // 做题
        showQuestionFun() {
            if (this.questions.length == 0) {
                this.$message.error({ el: this.bearRef.$el, message: '暂未设置答题题目' })
                return
            }
            this.question = this.questions[this.questionIndex]
            this.startExerciseFun()
        },
        // 识记生词
        rememberWord() {
            if (this.wordsList.length == 0) {
                this.$message.error({ el: this.bearRef.$el, message: '暂无已加入的生词' })
                return
            }
            let path = '/reading/remember?exerciseId=' + this.exerciseId + '&articleId=' + this.articleId 
            if (this.userId) {
                path += '&userId=' + this.userId
            }
            this.$router.push(path)
        },
        // 跳转有道词典
        jumpYoudao(word) {
            let url = 'https://dict.youdao.com/result?word=' + word + '&lang=en'
            window.open(url)
        },
        // 选择选项
        chooseOptionFun(e){//选择
            // if (!this.isClick) return
            this.firstTime = ''
            this.lastTime = ''
            this.questionWordPop = false

            let obj = {
                id: e.questionId,
                answer: [e.prefix]
            }
            if (!this.answerlist) {
                this.answerlist.push({
                    index: this.questionIndex,
                    answer: [e.prefix]
                })
            } else {
                let indexs = this.answerlist.findIndex(item => item.index == this.questionIndex)
                if (this.question.type.value == 1) {
                    // 单选
                    if (indexs >= 0) {
                        this.answerlist.splice(indexs, 1)
                    }
                    this.answerlist.push({
                        index: this.questionIndex,
                        answer: [e.prefix]
                    })
                }else if (this.question.type.value == 2) {
                    // 多选
                    if (indexs >= 0) {
                        let index = this.answerlist[indexs].answer.findIndex(item => item == e.prefix)
                        if (index >= 0) {
                            this.answerlist[indexs].answer.splice(index, 1)
                        }else {
                            this.answerlist[indexs].answer.push(e.prefix)
                        }
                        obj.answer = this.answerlist[indexs].answer
                    }else {
                        this.answerlist.push({
                            index: this.questionIndex,
                            answer: [e.prefix]
                        })
                        obj.answer = [e.prefix]
                    }
                    
                }
            }
            
            let _indexs = this.answerData.answers.findIndex(item => item.id == e.questionId)
            _indexs >= 0 ? this.answerData.answers.splice(_indexs, 1) : ''
            if (this.question.type.value == 2 && obj.answer.length) {
                this.answerData.answers.push(obj)
            }else{
                this.answerData.answers.push(obj)
            }

        },
        checkOptionChoose(option) {
            // 判断当前选项是否被选中
            let indexs = this.answerlist.findIndex(item => item.index == this.questionIndex)
            if (indexs >= 0) {
                let index = this.answerlist[indexs].answer.findIndex(item => item == option.prefix)
                return index >= 0 ? true : false
            }else {
                return false
            }
        },
        startExerciseFun() {
            if (this.exercise && this.exercise.logId && this.exercise.log.status.value == 0) {
                this.isAnswer = true
                this.questionShow = true
                this.clock()
            }else {
                let params = {
                    exerciseId: this.exerciseId,
                    articleId: this.articleId,
                    userId: this.userId
                }
                this.loading = true
                startExercise(params).then(res => {
                    this.loading = false
                    if (res.error == 0) {
                        this.isAnswer = true
                        this.questionShow = true
                        this.clock()
                        this.getExercise()
                    }else if (res.error == 504) {
                        this.finiseCourseFun()
                    }
                }).finally(() => {
                    this.loading = false
                })
            }
        },
        // 保存答案
        async saveAnswerFun() {
            if (this.answerData.answers && this.answerData.answers.length < 1) {
                return false
            }
            
            this.answerData.exerciseId = this.exerciseId
            this.answerData.logId = this.exercise ? this.exercise.logId : 0
            this.answerData.userId = this.userId
            
            let res = null
            res = await saveAnswer(this.answerData)
            if (res.error !== 0) {
                if (res.error == 503 || res.error == 504) {
                    throw res.error
                }
            }
        },
        // 交卷
        async submitFn(isRequestSaveAnswer, isExpire){
            if (isRequestSaveAnswer) {
                try {
                    await this.saveAnswerFun()
                } catch(error) {
                    if (error == 503) {
                        return
                    }else if (error == 504) {
                        this.submitFn(false, true)
                    }
                }
                return
            }

            // 判断clockTime是否超过60秒
            if (!isExpire) {
                let time = this.clockTime.split(':')
                if (parseInt(time[0]) * 60 + parseInt(time[1]) < 60) {
                    this.$message.warning({ el: this.bearRef.$el, message: '60秒之内不能提交，请您再确认下答案' })
                    return
                }
            }

            // 将clockTime转换成秒
            let clockTime = this.clockTime.split(':')
            let useTime = parseInt(clockTime[0]) * 60 + parseInt(clockTime[1])

            let param = {
                logId: this.exercise ? this.exercise.logId : 0,
                exerciseId: this.exerciseId,
                userId: this.userId,
                useTime: useTime
            }

            this.submitLoading = true
            await submitExercise(param).then(res => {
                this.submitLoading = false
                if (res.error == 0) {
                    if (isExpire) {
                        // 到期结束课程
                        this.finiseCourseFun()
                    } else {
                        this.$message.success({ el: this.bearRef.$el, message: '提交成功' })
                        let path = '/aireading/analysis?exerciseId=' + this.exerciseId 
                        if (this.userId) {
                            path += '&userId=' + this.userId
                        }
                        this.$router.push(path)
                    }
                }
            }).finally(() => {
                this.submitLoading = false
            })
        },
        // 下课
        async finiseCourseFun() {
            this.loading = true
            await finishCourse({
                exerciseId: this.exerciseId,
                userId: this.userId
            }).then(res => {
                this.loading = false
                if (res.error === 0) {
                    this.$router.push({path: '/index'})
                }
            }).finally(() => {
                this.loading = false
            })
        },
        // 详情词汇
        onmouseup () {
            if (window.getSelection) {
                this.infoTop = 0
                this.infoLeft = 0
                let text = window.getSelection().toString().trim(); //选中文字
                if(!text.trim()) {
                    this.wordPop = false
                    return 
                }
                let {left,top, height, width} = window.getSelection().getRangeAt(0).getBoundingClientRect()
                
                this.infoword = text
                this.infoTop = top + 70
                this.infoLeft = left 
                this.wordPop = true
            } else if (document.selection && document.selection.type != "Control") {      
                //ie9以下的支持，可不考虑
                $scope.mark.selectionText[0] = document.selection.createRange().text;
            }
        },
        mouseDownFn(){
            this.firstTime = new Date().getTime()
        },
        // 选项词汇
        onmouseup_word(e) {
            this.lastTime = new Date().getTime()
            if (window.getSelection) {

                this.wtop = 0
                this.wleft = 0
                let text = window.getSelection().toString().trim(); //选中文字
                // 鼠标点击和抬起的时间差<200，或者选中文本为空时，可以触发点击
                if((this.lastTime - this.firstTime) < 200 || text === ''){
                    this.isClick = true
                } else {
                    this.isClick = false
                }
                if(!text.trim()) {
                    this.questionWordPop = false
                    return 
                }

                // 判断text是否是英文单词
                let reg = /^[a-zA-Z]+$/;
                if (!reg.test(text)) {
                    this.$message.error({ el: this.bearRef.$el, message: '请选择英文单词' })
                    return
                }
                let start = window.getSelection().anchorOffset; //开始位置
                let end = window.getSelection().focusOffset;  //结束位置
                let {left,top,right} = window.getSelection().getRangeAt(0).getBoundingClientRect()
                this.word = text

                this.wtop = top + 70
                this.wleft = left 
                this.questionWordPop = true
                let w = 0
                let winWidth =window.innerWidth
                this.$nextTick(()=>{
                    w = this.$refs.myElement.offsetWidth
                    if((right+w)>winWidth){
                        this.wleft =  winWidth - w
                    }
                })
                
                this.getWordTranslate(this.word)
                
            } else if (document.selection && document.selection.type != "Control") {      
                //ie9以下的支持，可不考虑
                $scope.mark.selectionText[0] = document.selection.createRange().text;
            }
        },
        // 跳转题目
        jumpQuestion(index) {
            this.questionIndex = index
            this.question = this.questions[this.questionIndex]
            this.answerOver = false
            this.questionShow = true
        },
        // 下一题
        async nextQuestion() {
            if (this.questionIndex < this.questions.length - 1) {
                this.questionIndex++
                this.question = this.questions[this.questionIndex]
                this.$refs.refAnswerBox && this.$refs.refAnswerBox.scrollTo({ top: 100, behavior: "smooth" })
                try {
                    await this.saveAnswerFun()
                } catch (error) {
                    if (error == 503) {
                        return
                    } else if (error == 504) {
                        this.submitFn(false, true)
                        return
                    }
                }
            } else {
                this.submitFn(true)
                this.questionShow = false
                this.answerOver = true
            }
        },
        // 上一题
        prevQuestion() {
            if (this.questionIndex > 0) {
                this.questionIndex--
                this.question = this.questions[this.questionIndex]
                this.$refs.refAnswerBox && this.$refs.refAnswerBox.scrollTo({ top: 100, behavior: "smooth" })
            }
        },
        // 计时器
        clock() {
            let time = 0
            let timer = setInterval(() => {
                time++
                let m = parseInt(time / 60)
                let s = time % 60
                m = m < 10 ? '0' + m : m
                s = s < 10 ? '0' + s : s
                this.clockTime = m + ':' + s
            }, 1000)
        },
        closeWordPop(type){
            if (type == 1) {
                this.wordPop = false
            }else {
                this.questionWordPop = false
            }
            window.getSelection().removeAllRanges();
        },
        // 打印
        printFun() {
            let url = config.basePrintUrl + '/article?id=' + this.articleId
            window.open(url)  
        },
        toViewFun() {
            let url = config.basePrintUrl + '/view?id=' + this.articleId
            window.open(url)
        },
        // 详情页面
        toParticulars() {
            if (this.article?.taskStatus?.value === 1) {
                this.$message.error('知识点内容生成中~');
                return;
            }
            this.$router.push(`/reading/particulars?exerciseId=${this.exerciseId}&articleId=${this.articleId}&userId=${this.userId}&isAi=1`);
        }
    }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";

.po{
    width: 0;
    height: 0;
}

.tagword{
    background-color: #019E69;
    background:#019E69;
}
.modal_cont{
    width: 100%;
    height: 100%;
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.text_cont-view {
    flex: 1;
    overflow: auto;
    // overflow-wrap: break-word;
    &::-webkit-scrollbar {
        width: 6px;
        height: 1px;
    }
    /* 滑块部分 */
    &::-webkit-scrollbar-thumb { 
        border-radius: 5px;
        background-color:#019E69;
    }
    /* 轨道部分 */
    &::-webkit-scrollbar-track { 
    //   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #fff;
        border-radius: 5px;
    }
}
.text_cont,.word_text{
    user-select: text;
    &::selection
    {
        background: #019E69;
        color: #fff;
    }
    ::-moz-selection
    {
        background: #019E69;
        color: #fff;

    }
}
.green{background: #19C14B;}
.box_cont{overflow: hidden;}

.topic_cont{
    width: 65%;
}
.answer_tit{
    position: relative;
    .last_icon{
        position: absolute;
        left: 0;
        width: 3rem;
        height: 3rem;
    }
    .next_icon{
        position: absolute;
        right: 0;
        width: 3rem;
        height: 3rem;
    }
}
.answer_cont{
    width: 35%;
    height: auto;
    overflow: auto;
    background: #F7F8FA;
    padding: 3.5rem 4rem;
    &::-webkit-scrollbar {
        width: 0px;
        height: 1px;
    }
    /* 滑块部分 */
    &::-webkit-scrollbar-thumb { 
        border-radius: 5px;
        background-color:#019E69;
    }
    /* 轨道部分 */
    &::-webkit-scrollbar-track { 
    //   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #fff;
        border-radius: 5px;
    }
    .title{
        width: 23.7rem;
        height: 6rem;
        border-radius: 14.3rem;
        background: rgba(#F69B2C, .1);
        margin: 0 auto;
        .icon{
            width: 4rem;
            height: 4rem;
            margin-right: 1rem;
        }
        .text{
            font-size: 4rem;
            color: #F69B2C;
        }
    }
    .option_row{
        border: 0.5px solid #019E69;
        border-radius: 4px;
        padding: 2.6rem 2rem;
        margin-top: 2.4rem;
        .option{
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: #FFFFFF;
            box-sizing: border-box;
            border: 1px solid #019E69;
            margin-right: 3rem;
        }
        .status1{
            background: #019E69;
            color: #fff;
        }
    }
    .status{
        background: rgba(11, 154, 255, 0.1);
    }
    .work_cont{
        margin-top: 3rem;
        .text{margin-top: 1.6rem;}
    }
}
.head_cont{
    color: #3A3F5E;
    font-size: 3.2rem;
    line-height: 6.4rem;
    margin-top: 2.4rem;
    user-select: text;
    &::selection
        {
            background: #019E69;
            color: #fff;
        }
        ::-moz-selection
        {
            background: #019E69;
            color: #fff;

        }
    .tag{
        width: 5.5rem;
        height: 3.4rem;
        border-radius: 6px;
        color: #fff;
        background: #019E69;
        padding: 5px 7px;
    }
}

.answer_over{
    padding: 4rem;
    background: #fff;
    color: #9E9E9E;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4rem;
    .cont{
        // width: 100%;
        margin-top: 5.4rem;
        margin-bottom: 10rem;
        flex-wrap: wrap;
        .item{
            width: 6rem;
            height: 6rem;
            border-radius: 50%;
            color: #fff;
            margin-right: 1rem;
            &:last-child(5n){
                margin-right: 0;
            }
        }
        
    }
}
.info_cont{
    position: fixed;
    min-width: 26.8rem;
    // height: 16.1rem;
    border-radius: 1rem;
    opacity: 1;
    background: #FFFFFF;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
    padding: 0 2.4rem;
    .word{
        color: #3A3F5E;
        padding: 1rem 0;
        border-bottom: 1px solid #F0F2F4;
        line-height: 7rem;
    }
    .word_btn{
        text-align: center;
        color: #019E69;
        // padding: 2.4rem 0;
        line-height: 7rem;
        font-size: 2.2rem;
    }
}
.window_cont{
    position: fixed;
    min-width: 40.6rem;
    // height: 16.1rem;
    border-radius: 1rem;
    opacity: 1;
    background: #FFFFFF;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
    padding: 0 2.4rem;
    .word{
        color: #3A3F5E;
        padding: 1rem 0;
        line-height: 7rem;
        .play_icon{
            width: 3rem;
            height: 3rem;
            margin-left: 1rem;
        }
    }
    .word_btn{
        width: 50%;
        text-align: center;
        color: #019E69;
        // padding: 2.4rem 0;
        line-height: 4rem;
        font-size: 2.2rem;

    }
    .word_meaning{
        // min-width: 120rem;
        // max-width: 100%;
        line-height: 4.8rem;
        max-height: 60vh;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 4px;
            height: 1px;
        }
        /* 滑块部分 */
        &::-webkit-scrollbar-thumb { 
            border-radius: 5px;
            background-color:#019E69;
        }
        /* 轨道部分 */
        &::-webkit-scrollbar-track { 
        //   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #fff;
            border-radius: 5px;
        }
    }
    .wordbtn_cont{
        border-top: 1px solid #F0F2F4;
        padding: 1.5rem 0;
        margin-top: 2.7rem;
    }
    .bl{
        border-left: 0.5px solid #F0F2F4;
    }
}
.tit_cont{
    width: 100%;
    padding: 4.2rem 14rem 1.6rem;
    text-align: left;
}
.level_cont{
    margin-top: 2rem;
    .print_cont{
        width: 13.6rem;
        height: 4.4rem;
        border-radius: 4px;
        background: #F7F8FA;
        .icon{
            width: 2.4rem;
            height: 2.4rem;
            margin-right: 1rem;
        }
    }
}
.level_row{
    color: #626780;
    .level_icon{
        width: 1.8rem;
        height: 1.8rem;
        margin-left: 5px;
        .icon{
            width: 2.4rem;
            height: 2.4rem;
        }
    }
}

.text_cont{
    padding: 0 14rem;
    font-family: Open Sans;
    font-size: 3.6rem;
    line-height: 7.2rem;
    letter-spacing: 0em;
    text-align: left;
    flex: 1;
    white-space: pre-wrap;
    word-break: break-word;
}
.justify-end{padding-left: 2rem}

.btn_cont{
    width: 100%;
    // padding: 2rem calc(20% + 6px) 0;
    // padding: 2rem 71.7rem 0 10rem;
    padding: 4.2rem 2rem;
    // border-top: 1px solid #4762BB;
    border-top: 1px solid #F7F8FA;
    .left_num{
        margin: auto 0;
        font-size: 3.6rem;
        font-weight: bold;
        .num1{
            color: #FF5252;
        }
        .num2{
            color: #767676;

        }
    }
}
.back_img{
    width: 4rem;
    height: 4rem;
    &:hover{
        content: url(@/assets/img/back_1.png);
    }
}
.w-full{
    width: 100%;
    // padding: 1rem 71.7rem 0 10rem;
}

.kdgkddkjdkhjdk {
    width: 12rem;font-size:2rem;padding: 1.1rem 3rem;
}
</style>
